<template>
  <div class="about">
    <h1>This is an about page</h1>
    <input type="text" v-model="a">
    <input type="text" v-model="b">

    <a v-bind:[parm]="val" >动态参数</a>

    <button @click.prevent="f">切换parm</button>

    <input @click.prevent="alert('a')" type="checkbox" id="myCheckbox">

    <h2>{{now}}</h2>

    <input type="text" v-model="question">

    {{sum}}

    

  </div>
</template>

<script>

export default {
  name: 'AboutView',
  data() {
    return {
      a: 1,
      b: '2',
      parm: 'href',
      val: '1',
      question: '0'
    }
  },
  methods:{
    f(){
      this.parm="title"
    },
    
  },
  computed:{
    now:function(){
      return Date.now();
    },
    sum:function(){
      return this.a+this.b;
    },
    cal:{
      set:function(val){
        this.a=val;
      },
      get:function(){
        return this.a;
      }
    }
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      alert("新的："+newQuestion+","+oldQuestion);
    }
  }
  // created: function(){
  //     alert(this.a);
  // },
  // created: ()=> {//错误
  //   alert(this.a)
  // }
}
</script>
